<template>
  <q-page>
    <div class="row q-pa-sm">
      <div class="col-3">
        <div class="sticky q-pr-sm" :style="'top: ' + topVal">
          <LeftComp :user-id="props.uid"></LeftComp>
        </div>
      </div>
      <div class="col">
        <q-tab-panels v-model="pageTab" animated>
          <q-tab-panel name="article" class="q-pa-none">
            <ArticlePanel
              :user-id="props.uid"
              :panel-tab="props.tab"
            ></ArticlePanel>
          </q-tab-panel>
          <q-tab-panel name="user" class="q-pa-none">
            <UserPanel :user-id="props.uid" :panel-tab="props.tab"></UserPanel>
          </q-tab-panel>
          <q-tab-panel name="follow" class="q-pa-none">
            <FollowPanel :user-id="props.uid" :panel-tab="props.tab">
            </FollowPanel>
          </q-tab-panel>
        </q-tab-panels>
      </div>
    </div>
    <q-dialog v-model="followDig">
      <FollowDig></FollowDig>
    </q-dialog>
    <SuspensionBtn></SuspensionBtn>
  </q-page>
</template>

<script setup lang="ts">
import SuspensionBtn from 'src/components/SuspensionBtn.vue';
import { storeToRefs } from 'pinia';
import { useWebStore } from 'src/stores/webStore';
import { onMounted, ref, watch } from 'vue';
import ArticlePanel from './ArticlePanel.vue';
import FollowPanel from './FollowPanel.vue';
import FollowDig from './FollowDig.vue';
import UserPanel from './UserPanel.vue';
import { artHas, userHas, followHas, followDig } from './shared';
import LeftComp from './LeftComp.vue';

const { topVal } = storeToRefs(useWebStore());

const props = defineProps<{
  uid: string;
  tab: string;
}>();

const pageTab = ref<'article' | 'user' | 'follow'>('article');

watch(
  () => props.tab,
  (val) => {
    handleTab(val);
  },
);

const handleTab = (val: string) => {
  if (val) {
    if (artHas(val)) {
      pageTab.value = 'article';
    } else if (userHas(val)) {
      pageTab.value = 'user';
    } else if (followHas(val)) {
      pageTab.value = 'follow';
    } else {
      pageTab.value = 'article';
    }
  }
};

onMounted(() => {
  handleTab(props.tab);
});
</script>

<style scoped></style>
